<template>
  <view v-if="shenheStatus == 0" class="level">
    <!-- <u-swiper
      :list="getSwiperList"
      :showInfo="true"
      :height="300"
      :mode="'none'"
      :circular="false"
      :autoplay="false"
      :border-radius="12"
      :effect3d="true"
      :bg-color="'#0e1d55'"
      type="shareholder"
      imgEl="pic_url"
      :currentIndex="currentIndex"
      @change="currentSwiperChange"
      @toPrivilege="toPrivilege"
    ></u-swiper> -->

    <swiper
      previous-margin="30rpx"
      next-margin="30rpx"
      :current="index"
      @change="currentSwiperChange"
    >
      <swiper-item v-for="item of list" :key="item.id">
        <view class="swiperItem">
          <image
            class="swiperItemBg"
            v-if="item.pic_url"
            :src="item.pic_url"
            mode="aspectFill"
          ></image>

          <view class="swiperContent">
            <view class="name">{{ item.name }}</view>

            <view class="swiperFooter">
              <view class="let">
                <!-- <view class="line"
                  ><view
                    :style="{
                      width: progress + '%'
                    }"
                  ></view
                ></view>
                <view class="des">
                  <view class="text">{{ progress }}/100</view>
                </view> -->
              </view>

              <view class="rig" @click="toPrivilege(item)">查看特权</view>
            </view>
          </view>
        </view>
      </swiper-item>
    </swiper>

    <view class="task" v-if="list[index].id != userLevel">
      <view class="head">
        <text class="title">{{ $t("shareholder.points") }}</text>
        <view class="progressText" v-if="nextLevel && false">
          {{ $t("shareholder.progress1") }}<text class="red">100%</text>，{{
            $t("shareholder.progress2")
          }}<text class="red">{{ nextLevel.name }}</text>
        </view>
        <view class="progressBox" v-if="progress && false">
          <text>{{ $t("shareholder.progress") }}</text>
          <view class="progress">
            <view class="percent" :style="{ width: progress + '%' }"></view>
          </view>
          <text>{{ progress }}%</text>
        </view>
      </view>
      <view class="taskList" v-if="currentLevel && currentLevel.text">
        <view
          class="taskItem"
          v-for="(item, index) in currentLevel.text"
          :key="index"
        >
          <view class="taskText">
            <view class="icon">
              <image
                :src="require('../images/man.png')"
                v-if="item.icon == 'man'"
              ></image>
              <image
                :src="require('../images/order.png')"
                v-if="item.icon == 'order'"
              ></image>
              <image
                :src="require('../images/goods.png')"
                v-if="item.icon == 'goods'"
              ></image>
              <image
                :src="require('../images/self.png')"
                v-if="item.icon == 'self'"
              ></image>
              <image
                :src="require('../images/money.png')"
                v-if="item.icon == 'recharge'"
              ></image>
            </view>
            <view class="taskTitle">
              <text class="title">{{ item.title }}</text>
              <view class="sub">
                {{ item.msg }}
                <view :class="['text', item.status === 1 ? 'on' : '']"
                  ><text>{{ item.value }}</text
                  >/{{ item.require }}</view
                >
              </view>
            </view>
          </view>
          <text class="complete" v-if="item.status == 1">{{
            $t("person.status4")
          }}</text>
          <text
            class="undone"
            v-if="item.status == 0"
            @click="toFinish(item)"
            >{{ $t("shareholder.to") }}</text
          >
          <!-- <image
            class="comPic"
            src="../images/complete.png"
            v-if="item.status == 1"
          ></image> -->
        </view>
      </view>
    </view>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from "@/components/shenhe/shenhe";
export default {
  components: { Shenhe },
  data() {
    return {
      list: [],
      // 当前所在等级
      // currentLevel: {},
      // 用户的等级id
      userLevel: 0,
      index: 0
    };
  },
  methods: {
    currentSwiperChange(e) {
      this.index = e.detail.current;
    },
    // 获取等级列表
    async getLevelList() {
      const res = await this.$allrequest.shareholder.holderLevel({}, true);
      if (res.code == 0) {
        this.list = res.data.level_res;
        this.userLevel = res.data.level_id;
      }
    },
    // 点击去完成
    toFinish(e) {
      if (e.icon == "man") {
        uni.navigateTo({
          url: "/shareholder/shareholder/code"
        });
      }
      if (e.icon == "order" || e.icon == "self") {
        uni.switchTab({
          url: "/pages/home/home"
        });
      }
      if (e.icon == "recharge") {
        uni.navigateTo({
          url: "/user/balance/recharge"
        });
      }
      if (e.icon == "goods") {
        uni.navigateTo({
          url: "/goods/goods/goods?id=" + e.goods_id
        });
      }
    },
    // 跳转特权页面
    toPrivilege(e) {
      uni.setStorageSync("richText", e.detail);
      uni.navigateTo({
        url: "/md_admin/apply-md/richText?title=特权"
      });
    },

    changeSwiper(e) {
    }
  },
  created() {
    this.getLevelList();
  },
  computed: {
    getSwiperList() {
      return this.list
        .filter((el) => el.pic_url)
        .map((el) => {
          return { image: el.pic_url };
        });
    },
    currentLevel() {
      let { list, index } = this;
      if (list && list.length) {
        return list[index];
      }

      return null;
    },

    progress() {
      let { nextLevel } = this;

      if (!nextLevel) return 0;

      let arr = nextLevel.text || [],
        num = arr.filter((e) => e.status === 1).length;

      return ((100 / arr.length) * num).toFixed(0);
    },

    nextLevel() {
      let { list, userLevel } = this,
        index = list.findIndex((item) => {
          return item.id === String(userLevel);
        });
      if (!list[index + 1]) return false;
      let item = list.find((item) => {
        return item.id === list[index + 1].id;
      });

      if (!item || index >= this.list.length - 1) {
        return false;
      } else {
        return list[index + 1];
      }
    }
    // currentIndex() {
    //   let index = this.list.findIndex((item) => {
    //     return item.id == this.userLevel;
    //   });
    //   return index;
    // }
  }
};
</script>

<style lang="less" scoped>
.level {
  min-height: 100vh;
  padding-bottom: calc(constant(safe-area-inset-bottom) + 40rpx);
  padding-bottom: calc(env(safe-area-inset-bottom) + 40rpx);
  background-color: #0e1d55;
  padding-top: 40rpx;
  font-family: PingFang SC;
  .task {
    width: 690rpx;
    margin: 60rpx auto 0 auto;
    background-color: #fff;
    border-radius: 20rpx;
    overflow: hidden;
    .head {
      padding: 30rpx 30rpx 0 30rpx;
      background: linear-gradient(180deg, #d4e5fe 0%, #fff 100%);
      display: flex;
      flex-direction: column;
      .title {
        font-size: 30rpx;
        font-weight: 600;
        color: #101d54;
        // margin-bottom: 30rpx;
      }
      .progressText {
        display: flex;
        align-items: center;
        font-size: 26rpx;
        font-weight: 600;
        color: #262626;
        .red {
          color: #f0250e;
        }
      }
      .progressBox {
        display: flex;
        align-items: center;
        margin-top: 10rpx;
        font-size: 24rpx;
        color: #8c8c8c;
        text {
          white-space: nowrap;
        }
        .progress {
          position: relative;
          flex: auto;
          height: 22rpx;
          border-radius: 120rpx;
          overflow: hidden;
          background-color: #fff;
          margin: 0 14rpx;
          .percent {
            position: absolute;
            height: 100%;
            top: 0;
            left: 0;
            background-color: #f0250e;
            border-radius: 120rpx;
          }
        }
        text:last-child {
          color: #f0250e;
        }
      }
    }
    .taskList {
      // margin-top: 20rpx;
      padding: 0 30rpx;
      .taskItem {
        position: relative;
        padding: 30rpx 0;
        border-bottom: 1px solid #f8f8f8;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .taskText {
          display: flex;
          align-items: center;
          .icon {
            width: 80rpx;
            min-width: 80rpx;
            height: 80rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            overflow: hidden;
            .iconfont {
              font-size: 60rpx;
            }
            image {
              width: 100%;
              height: 100%;
            }
          }
          .bule {
            background-color: #e7f0fe;
          }
          .orange {
            background-color: #fef2e3;
            .iconfont {
              color: #faa320;
            }
          }
          .red {
            background-color: #fde5dc;
            .iconfont {
              color: #f96431;
            }
          }
          .taskTitle {
            flex: auto;
            margin-left: 20rpx;
            .title {
              color: #262626;
              font-weight: 600;
              font-size: 30rpx;
            }
            .sub {
              margin-top: 8rpx;
              display: flex;
              align-items: center;
              // text:nth-child(1) {
              //   height: 38rpx;
              //   padding: 0 10rpx;
              //   border-radius: 4rpx;
              //   border: 1px solid #f0250e;
              //   font-size: 24rpx;
              //   color: #f0250e;
              //   margin-right: 12rpx;
              // }
              // text:nth-child(2) {
              font-size: 26rpx;
              color: #8c8c8c;
              // }

              .text {
                text {
                  color: #f0250e;
                }

                &.on {
                  color: #f0250e;
                }
              }
            }
          }
        }
        .complete {
          z-index: 100;
          width: 120rpx;
          height: 50rpx;
          border-radius: 8rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #f0250e;
          font-size: 24rpx;
          border: 1px solid #f0250e;
        }
        .undone {
          z-index: 100;
          width: 120rpx;
          height: 50rpx;
          border-radius: 8rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #ffffff;
          font-size: 24rpx;
          background-color: #f0250e;
        }
        .comPic {
          position: absolute;
          width: 86rpx;
          height: 72rpx;
          top: 0;
          right: 0;
        }
      }
      .taskItem:last-child {
        border-bottom: none;
      }
    }
  }
}

swiper,
swiper-item,
.swiperItem {
  height: 296rpx;
}

.swiperItem {
  position: relative;
  background: #070a18;
  box-shadow: 0rpx 6rpx 24rpx 2rpx rgba(0, 0, 0, 0.5);
  border-radius: 24rpx;
  border: 2rpx solid #58555c;
  margin: 0 10rpx;
}

.swiperItemBg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.swiperContent {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding: 30rpx 40rpx;

  .name {
    font-size: 44rpx;
    font-weight: 600;
    color: #f0ccb7;
  }

  .line {
    position: relative;
    width: 280rpx;
    height: 4rpx;
    background: #393f4e;

    view {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      background: #fff;
    }
  }

  .des {
    padding-top: 14rpx;
    color: #fff;
    font-size: 26rpx;
    font-weight: bold;
  }
}

.swiperFooter {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .rig {
    margin-left: 20rpx;
    padding: 8rpx 20rpx;
    background: #403b3b;
    border-radius: 8rpx;
    font-size: 24rpx;
    color: #fff;
    font-weight: bold;
  }
}
</style>
